<template>
    <view class="region">
        <picker
            mode="multiSelector"
            :range="range"
            :value="value"
            class="picker"
            :disabled="disabled"
            range-key="name"
            @change="change"
            @columnchange="columnchange"
        >
            <view class="content" :class="{ placeholder: !regionStr }">
                <text
                    class="ellipsis-1"
                    :class="regionStr == '' ? 'ellipsis-c' : ''"
                    >{{ regionStr ? regionStr : placeholder }}</text
                >
            </view>
        </picker>
    </view>
</template>

<script>
import regionCtrl from "../../../js/region/RegionCtrl.js";
let regionData = regionCtrl.data; //require('@/static/region.json');
// const regionData = require('https://cdn-test.imiyun.com/d/region.json');
export default {
    /**
     * 数据
     */
    props: {
        // 是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },

        // placeholder
        placeholder: {
            type: String,
            default: "请选择省/市/区",
        },

        // 默认值
        defaultValue: {
            type: Array,
            default() {
                return null;
            },
        },
    },

    /**
     * 数据
     */
    data() {
        return {
            range: [[], [], []], // 省/市/区
            value: [0, 0, 0], // value 的值表示选择了 range 中的第几个（下标从 0 开始）,默认为 [0, 0, 0]，即 range 为 ['第一个省', '第一个省的第一个市', '第一个省的第一个市的第一个区']
            regionStr: "", // 选中的省市区字符串
        };
    },

    /**
     * 监听数据
     */
    watch: {
        // 默认值
        defaultValue() {
            this.regionStr = "";
            this.value = [0, 0, 0];
            // 设置/更新省市区数据
            this.defaultValue ? this.setDefaultValue() : this.setRange();
        },
    },

    /**
     * 组件初次加载完成
     */
    mounted() {
        // 设置/更新省市区数据
        // this.defaultValue ? this.setDefaultValue() : this.setRange();
        // this.initData(data)
        // this.setRange();
    },

    /**
     * 方法
     */
    methods: {
        initData() {
            let that = this;
            if (regionData && regionData.length == 0) {
                regionCtrl.getRegion(callBack);
            } else {
                this.setRange();
            }
            function callBack(data) {
                regionData = data;
                if (regionData.length > 0) {
                    that.setRange();
                    // that.setDefaultValue();
                }
            }
        },
        /**
         * 设置/更新省市区数据
         */
        setRange() {
            // 省市区数据
            let range = [[], [], []];

            // 省
            regionData.forEach((el) => {
                range[0].push({
                    code: el.code,
                    name: el.name,
                });
            });

            // 市
            regionData[this.value[0]].cityList.forEach((el) => {
                range[1].push({
                    code: el.code,
                    name: el.name,
                });
            });

            // 区
            regionData[this.value[0]].cityList[this.value[1]].cityList.forEach(
                (el) => {
                    range[2].push({
                        code: el.code,
                        name: el.name,
                    });
                }
            );
            // 更新省市区数据
            this.range = range;
            console.log("初始话", range);
        },

        /**
         * 设置默认值
         */
        setDefaultValue() {
            this.regionStr = "";
            let provinceIndex = 0;
            let cityIndex = 0;
            let areaIndex = 0;
            let len = regionData.length;
            if (this.defaultValue && len > 0) {
                //省
                for (let i = 0; i < len; i++) {
                    let temp = regionData[i];
                    if (temp.name == this.defaultValue[0]) {
                        provinceIndex = i;
                        let len1 = temp.cityList.length;
                        //市
                        for (let j = 0; j < len1; j++) {
                            let temp1 = temp.cityList[j];
                            if (temp1.name == this.defaultValue[1]) {
                                cityIndex = j;
                                let len2 = temp1.cityList.length;
                                //区
                                for (let k = 0; k < len2; k++) {
                                    let temp2 = temp1.cityList[k];
                                    if (temp2.name == this.defaultValue[2]) {
                                        areaIndex = k;
                                        break;
                                    }
                                }
                                break;
                            }
                        }
                        break;
                    }
                }
                // 更新 value 的值
                this.value = [provinceIndex, cityIndex, areaIndex];

                console.log(provinceIndex, cityIndex, areaIndex);
                // 设置/更新省市区数据
                this.setRange();

                // 更新选中的省市区字符串
                this.regionStr =
                    regionData[provinceIndex].name +
                    "·" +
                    regionData[provinceIndex].cityList[cityIndex].name +
                    "·" +
                    regionData[provinceIndex].cityList[cityIndex].cityList[
                        areaIndex
                    ].name;
            } else {
                this.regionStr = "";
            }
        },

        /**
         * 某一列的值改变时触发
         * @param {Number} event.detail.column 表示改变了第几列（下标从0开始）
         * @param {Number} event.detail.value 表示变更值的下标
         */
        columnchange(event) {
            // 改变的是省
            if (event.detail.column == 0) {
                this.value = [event.detail.value, 0, 0];
            }
            // 改变的是市
            if (event.detail.column == 1) {
                this.value.splice(1, 1, event.detail.value);
                this.value.splice(2, 1, 0);
            }
            // 改变的是区
            if (event.detail.column == 2) {
                this.value.splice(2, 1, event.detail.value);
            }

            // 设置/更新省市区数据
            this.setRange();
        },

        /**
         * 确认选择
         */
        change(event) {
            // 更新选中的省市区字符串
            this.regionStr =
                this.range[0][this.value[0]].name +
                "·" +
                this.range[1][this.value[1]].name +
                "·" +
                this.range[2][this.value[2]].name;

            // 传递事件
            this.$emit(
                "change",
                this.range[0][this.value[0]],
                this.range[1][this.value[1]],
                this.range[2][this.value[2]]
            );
        },
    },
};
</script>

<style lang="scss" scoped>
/* 文本多出部分用省略号表示 */
.ellipsis-1 {
    width: 290px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-size: 14px;
    color: #333;
}
.ellipsis-c {
    color: #aaa;
}

.region,
.picker {
    height: 100%;
    display: flex;
    align-items: center;
}
.placeholder {
    color: #949596;
}
</style>
